<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="/css/bootstrap@5.3.2/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
     <!-- 导航条 -->
     <nav class="navbar  bg-primary navbar-expand-lg bg-body-tertiary " data-bs-theme="dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">新闻</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">咨询</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
     <!-- /导航条 -->

     <div class="container"  >
      <div class="row justify-content-center mt-5">
        <div class="col-4">
          <div class="card" >
            <div class="card-body">
              <h3 class="card-title text-center">登录</h3>
                <!-- 表单 -->
            <form>
              <div class="mb-3">
              <!-- <label for="exampleInputEmail1" class="form-label">邮箱</label> -->
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="手机号码/邮箱" aria-describedby="emailHelp">
              <div id="emailHelp" class="form-text"></div>
            </div>
            <div class="mb-3">
              <!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
              <input type="password" class="form-control" placeholder="密码" id="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">免登录</label>
            </div>
            <button type="button" id="loginBtn" class="btn btn-primary w-100">登录</button>
          </form>
          <!-- /表单 -->
            </div>
          </div>
          
          
          
          
         
        </div>
      </div>
     
     </div>

      

    <script src="/js/bootstrap@5.3.2/bootstrap.bundle.min.js"></script>
  </body>
  <script>
     let loginBtn=document.querySelector("#loginBtn");
     //绑定事件
     loginBtn.addEventListener('click',()=>{
         console.log("loginBtn.被单击");
     });


  </script>
</html>